<template>
  <div class="root">
    <m-header title="神秘资料">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">
      <div class="data-list">
        <div class="data-list-item" @click="toSelfieManagePage">
          <div class="data-list-item-element-left">
            最美自拍
          </div>
          <div class="data-list-item-element-right">

            <div class="photo-list">
              <div class="avatar-warp" v-for="item in photoList" v-bind:style="{backgroundImage: 'url(' + item.avatar + ')'}">
                <!--<img class="avatar" v-for="item in photoList" :src="item.avatar" />-->
              </div>
              <img class="back-icon" src="../assets/images/more_icon.png" />
            </div>
          </div>
        </div>

        <div class="data-list-item" @click="secretSignalDialog">
          <div class="data-list-item-element-left">
            搭讪暗号
          </div>
          <div class="data-list-item-element-right" @click="secretSignalDialog">
            <span> {{mySecretInfo.secretSignal}} </span>
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

        <div class="data-list-item" @click="likeTypeDialog">
          <div class="data-list-item-element-left">
            喜欢的类型
          </div>
          <div class="data-list-item-element-right">
            <span> {{mySecretInfo.likeType}} </span>
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

        <div class="data-list-item" @click="usuallyAreaDialog">
          <div class="data-list-item-element-left">
            常去的地方
          </div>
          <div class="data-list-item-element-right">
            <span> {{mySecretInfo.usuallyArea}}</span>
            <img class="back-icon" src="../assets/images/more_icon.png" />
          </div>
        </div>

      </div>

      <mu-dialog :open="openSecretSignalDialog" @close="closeDialog" bodyClass="dialog-body2">
        <mu-text-field id="signal_input" hintText="搭讪暗号" :errorText="secretSignalInputErrorText" @textOverflow="handleSecretSignalInputOverflow"
          :maxLength="20" :value="mySecretInfo.secretSignal" />
        <mu-text-field id="signal_price_input" hintText="别人查看此项资料须支付的费用(元)" type="number" :value="mySecretInfo.secretSignalPrice" />
        <mu-flat-button slot="actions" primary label="取消" @click="closeDialog" />
        <mu-flat-button slot="actions" primary label="确定" @click="updateSecretSignal" />
      </mu-dialog>

      <mu-dialog :open="openUsuallyAreaDialog" @close="closeDialog" bodyClass="dialog-body2">
        <mu-text-field id="usually_area_input" hintText="常去的地方" :errorText="usuallyAreaInputErrorText" @textOverflow="handleUsuallyAreaInputOverflow"
          :maxLength="20" :value="mySecretInfo.usuallyArea" />
        <mu-text-field id="usually_area_price_input" hintText="别人查看此项资料须支付的费用(元)" type="number" :value="mySecretInfo.usuallyAreaPrice"
        />
        <mu-flat-button slot="actions" primary label="取消" @click="closeDialog" />
        <mu-flat-button slot="actions" primary label="确定" @click="updateUsuallyArea" />
      </mu-dialog>

      <mu-dialog :open="openLikeTypeDialog" @close="closeDialog" bodyClass="dialog-body2">
        <mu-text-field id="like_type_input" hintText="喜欢的类型" :errorText="likeTypeInputErrorText" @textOverflow="handleLikeTypeInputOverflow"
          :maxLength="20" :value="mySecretInfo.likeType" />
        <mu-text-field id="like_type_price_input" hintText="别人查看此项资料须支付的费用(元)" type="number" :value="mySecretInfo.likeTypePrice" />
        <mu-flat-button slot="actions" primary label="取消" @click="closeDialog" />
        <mu-flat-button slot="actions" primary label="确定" @click="updateLikeType" />
      </mu-dialog>

    </div>
  </div>
</template>

<script>
  import mHeader from '../components/header'
  import {
    mapActions,
    mapState
  } from 'vuex'
  import {
    SET_MY_SECRET_INFO,
    UPDATE_MY_SECRET_SIGNAL,
    UPDATE_LIKE_TYPE,
    UPDATE_USUALLY_AREA
  } from '../store/mySecretInfo'

  export default {
    components: {
      mHeader
    },

    data() {
      return {
        usuallyAreaInputErrorText: '',
        openUsuallyAreaDialog: false,
        likeTypeInputErrorText: '',
        openLikeTypeDialog: false,
        secretSignalInputErrorText: '',
        openSecretSignalDialog: false,
        secretSignalOverflow: false,
        likeTypeOverflow: false,
        usuallyAreaOverflow: false
      }
    },
    computed: {
      mySecretInfo() {
        return this.$store.state.mySecretInfo;
      },

      photoList() {
        let arr = this.$store.state.mySecretInfo.avatarList;
        if (arr.length > 3) {
          return arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3
        } else {
          return arr;
        }
      }
    },
    methods: {
      ...mapActions([
        SET_MY_SECRET_INFO,
        UPDATE_MY_SECRET_SIGNAL,
        UPDATE_LIKE_TYPE,
        UPDATE_USUALLY_AREA
      ]),
      getMySecretInfo() {
        var _this = this;
        this.$http.get('my/secret/info')
          .then(
            function (response) {
              if (response.data.code === '0') {
                _this.SET_MY_SECRET_INFO(response.data.data.user);
              }
              // console.log(_this.$store.state.mySecretInfo);
            })
          .catch(function (err) {});
      },

      secretSignalDialog() {
        this.openSecretSignalDialog = true;
      },
      usuallyAreaDialog() {
        this.openUsuallyAreaDialog = true;
      },
      likeTypeDialog() {
        this.openLikeTypeDialog = true;
      },
      closeDialog() {
        this.openUsuallyAreaDialog = false;
        this.openSecretSignalDialog = false;
        this.openLikeTypeDialog = false;
      },
      handleSecretSignalInputOverflow(isOverflow) {
        this.secretSignalInputErrorText = isOverflow ? '不能超过20个字符！' : '';
        this.secretSignalOverflow = isOverflow;
      },
      handleUsuallyAreaInputOverflow(isOverflow) {
        this.usuallyAreaInputErrorText = isOverflow ? '不能超过20个字符！' : '';
        this.usuallyAreaOverflow = isOverflow;
      },
      handleLikeTypeInputOverflow(isOverflow) {
        this.likeTypeInputErrorText = isOverflow ? '不能超过20个字符！' : '';
        this.likeTypeOverflow = isOverflow;
      },

      updateSecretSignal() {
        if (this.secretSignalOverflow) return;
        var _this = this;
        var signal = document.getElementById('signal_input').getElementsByTagName('input')[0].value;
        var price = document.getElementById('signal_price_input').getElementsByTagName('input')[0].value;

        this.$http.post('user/secret/signal', {
            secretSignal: signal,
            secretSignalPrice: price
          })
          .then(function (response) {
            if (response.data.code === '0') {
              _this.UPDATE_MY_SECRET_SIGNAL({
                signal: signal,
                price: price
              });
            }
            _this.closeDialog();
            // console.log(_this.$store.state.mySecretInfo.secretSignal); 
            // }
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      updateLikeType() {
        if (this.likeTypeOverflow) return;
        var _this = this;
        var _likeType = document.getElementById('like_type_input').getElementsByTagName('input')[0].value;
        var price = document.getElementById('like_type_price_input').getElementsByTagName('input')[0].value;

        this.$http.post('user/secret/liketype', {
            likeType: _likeType,
            likeTypePrice: price
          })
          .then(function (response) {
            if (response.data.code === '0') {
              _this.UPDATE_LIKE_TYPE({
                likeType: _likeType,
                price: price
              });
            }
            _this.closeDialog();
            // console.log(_this.$store.state.mySecretInfo.secretSignal); 
            // }
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      updateUsuallyArea() {
        if (this.usuallyAreaOverflow) return;
        var _this = this;
        var _usuallyArea = document.getElementById('usually_area_input').getElementsByTagName('input')[0].value;
        var _price = document.getElementById('usually_area_price_input').getElementsByTagName('input')[0].value;

        this.$http.post('user/secret/usuallyarea', {
            usuallyArea: _usuallyArea,
            usuallyAreaPrice: _price
          })
          .then(function (response) {
            if (response.data.code === '0') {
              _this.UPDATE_USUALLY_AREA({
                usuallyArea: _usuallyArea,
                price: _price
              });
            }
            _this.closeDialog();
          }).catch(function (error) {
            _this.closeDialog();
          });
      },

      toSelfieManagePage() {
        // this.$router.push('/selfiemanage');
        this.$router.push({
          path: '/selfiemanage',
          query: {
            selfiePrice: this.mySecretInfo.selfAvatarPrice,
          }
        });
      }
    },
    mounted() {
      this.getMySecretInfo();
    }

  }

</script>

<style lang='less' scoped>
  /*@import "../assets/less/common.less";*/
  .data-list {
    background-color: white;
    font-size: 16px;
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      background-color: white;
      border-bottom: 1px solid #E6E6E6;
      padding: 16px 24px 16px 24px;
      &-element-left {
        color: #333333;
      }
      &-element-right {
        color: #666666;
        .back-icon {
          width: 20px;
          height: 20px;
          margin-left: 4px;
        }
        .photo-list {
          display: flex;
          align-items: center;
          .avatar-warp {
            width: 56px;
            padding-bottom: 56px;
            margin: 0 2px;
            position: relative;
            /* 关键部分 */
            /*background-image: url(../assets/test.jpg);*/
            background-repeat: no-repeat;
            background-position: center center;
            /* 指定图片自动缩放大小 */
            -webkit-background-size: cover;
            background-size: cover;
            /* 指定使用padding-box区域显示背景图片 */
            -webkit-background-origin: padding-box;
            background-origin: padding-box;
          }
        }
      }
    }
  }
  
  .dialog-body2 {
    padding: 12px 24px 0 24px !important;
  }

</style>
